<template>
    <div class="" v-if="show" @click="$emit('click', $event)">
        <slot :slotData="slotData"></slot>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "qg-is-show",
    inject: {
        parent: {
            default: "",
        },
    },
    props: {
        auths: {
            type: Array,
            default: () => [1],
        },
        name: {
            type: String,
            default: "",
        },
        api: {
            type: String,
            default: "",
        },
        rangeKey: {
            type: String,
            default: "result",
        },
    },
    data() {
        return {
            slotData: {},
        };
    },
    computed: {
        params() {
            return (this.parent || {}).params;
        },
        ...mapState(["userInfo"]),
        show() {
            let boo = (this.auths || []).includes(this.userInfo.userType);
            if (boo && this.api) {
                let req = typeof this.api === "function" ? this.api.bind(this, this.params) : this.$http.get.bind(this, this.api, this.params);
                req().then((res) => {
                    this.slotData = res[this.rangeKey] || {};
                    this.$emit("input", this.slotData);
                });
            }
            return boo;
        },
    },
};
</script>

<style scoped></style>
